<template>
	<view class="content">
		<view class="" :style="'height: '+statusBarHeight+'px;'"></view>
		<view class="seltype flex-between">
			<view class="eqi">
				<view class="" style="margin-right: 60rpx;">
					总收益￥{{addressList.totalIncome ? addressList.totalIncome : 0}}
				</view>
				<view class="">
					昨日收益￥{{addressList.yesterIncome ? addressList.yesterIncome : 0}}
				</view>
			</view>
			<view class="addeq">
				<image src="../../static/equipmenta.png" mode="" @click="$fun.jump(`/pageC/add`)">
				</image>
			</view>
		</view>
		<scroll-view scroll-y="true" @scrolltolower='scrolltolower'>
			<view class="list"  :style="'height: '+scrollheight+'px;'" v-if="list.length>0">
				<view class="list_item" v-for="(item,index) in list" :key="index">
					<view class="flex-between">
						<image class="img1" :src="$fun.imgUrl(item.image)" mode=""></image>
						<u-icon v-if="activeTab==2" name="trash" :stop='true'
							@click="removeshow=true,node_id=item.node_id"></u-icon>
						<u-modal :show="removeshow" :title="title" :content='content' @confirm="removebind()"
							:showCancelButton='true' @cancel="removeshow=false"></u-modal>
						<view class="img2" v-if="item.onlineCode==0">
							<image src="../../static/online.png" mode=""></image>
						</view>
						<view class="img2" v-if="item.onlineCode==1">
							<image src="../../static/unline.png" mode=""></image>
						</view>
						<view class="img2" v-if="item.onlineCode==2">
							<image src="../../static/guzhang.png" mode=""></image>
						</view>

					</view>
					<view class="list_name">{{item.addrIspCode}}</view>
					<!-- <view class="list_name">{{item.name}}</view> -->
					<view class="list_text" @longpress.stop="copy(item.sn)">
						<view class="" style="width:90%; ellipsis;white-space: nowrap;overflow: hidden;">{{item.sn}}</view>
						<image src="../../static/copy.png" mode=""></image>
					</view>
					<view class="">
						<view class="list_profit">
							<view class="name">总收益</view>
							<view class="">￥{{item.totalIcome}}</view>
						</view>
						<view class="list_profit">
							<view class="name">昨日收益</view>
							<view class="">￥{{item.income}}</view>
						</view>
						<!-- 	<view class="list_profit">
							<view class="name">今日收益</view>
							<view class="" style="color: #FF3333;">￥{{item.Icome}}</view>
						</view> -->
					</view>

					<view class="item-bottom flex" v-if="item.pipeType==3">
						<view class="item-icon flex"
							@tap.stop="$fun.jump(`/pageC/dialInfo/dialInfo?sn=${item.sn}&netType=${item.netType}`)">
							<view class="">
								<u-icon name="minus-circle" color="#2979ff" size="18"></u-icon>
							</view>
							<view class="item-text">
								调整线路
							</view>
						</view>

						<view class="item-icon flex" @tap.stop="handleDialResult(item)">
							<view class="">
								<u-icon name="question-circle" color="#2979ff" size="18"></u-icon>
							</view>
							<view class="item-text">
								拨号信息
							</view>
						</view>
					</view>
				</view>
			</view>
			<noneDate v-if="!list.length" />
		</scroll-view>
		
		<TabBar :tabBarShow="1"></TabBar>
	</view>
</template>

<script>
	import uniCopy from '@/components/xb-copy/uni-copy.js'
	export default {
		data() {
			return {
				filterList: [{
					lable: '全部',
					value: -1
				}, {
					lable: '全部',
					value: -1
				}],
				show: false,
				lineModal: false,
				list1: [{
						name: '设备',
					},
					{
						name: '多拨号',
					},
					{
						name: '抖音业务',
					}
				],
				navlist: [{
					name: "全部",
					value: '-1'
				}, {
					name: "在线",
					value: '0'
				}, {
					name: "离线",
					value: '1'
				}, {
					name: "故障",
					value: '2'
				}, ],
				equipmentInfo: {
					count: 0
				},
				list: [],
				page: 1,
				limit: 20,
				activeIndex: 2,
				activeName: '全部分组',
				activeType: '',
				group_id: -1,
				pipeType: '',
				GroupList: [],
				GroupType: [],
				count: 0,
				activeTab: 0,
				isAdd: false,
				vlan: -1,
				isactive: -1,
				isSel: '',
				addressList: {
					addressList: "",
					yesterIncome: ""
				},
				statusBarHeight: 0,
				scrollheight: 0,
				removeshow: false,
				title: '移除设备',
				content: '确认移除该设备吗？',
				node_id: ''
			}
		},
		onPullDownRefresh() {
			this.page = 1
			this.list = []
			setTimeout(() => {
				this.getlist()
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			if (this.page != 1) {
				this.getUserSnList(this.page, this.limit)
			}
		},
		onNavigationBarButtonTap(e) {
			this.$fun.jump('/pageC/add')
		},
		onShow() {
			// this.list = []
			this.page = 1
			uni.hideTabBar()
			const phoneInfo = uni.getSystemInfoSync(); // 获取手机系统信息
			this.statusBarHeight = phoneInfo.statusBarHeight
			this.getlist()
			this.scrollheight = uni.getWindowInfo().windowHeight - 110
			
		},
		onHide() {
			this.isAdd = false
		},
		methods: {
			handleFilter(value) {
				this.page = 1
				this.limit = 20
				this.list = []
				this.filterList = value
				this.getUserSnList()
			},
			btnFilter(value) {
				this.page = 1
				this.limit = 20
				this.list = []
				// this.filterList = value
				this.isactive = value
				if (this.activeTab == 2) {
					this.getlist()
				} else {
					this.getUserSnList()
				}
			},
			// 拨号信息
			handleDialResult(item) {
				this.$fun.jump(`/pageC/dialResult/dialResult?sn=${item.sn}&netType=${item.netType}`)
			},
			handleScanCode() {
				let _that = this
				//#ifdef H5
				this.$fun.msg('H5暂不支持扫码！')
				//#endif
				// #ifndef H5
				uni.scanCode({
					success: function(res) {
						_that.$fun.jump(`/pageC/add?sn=${res.result}`)
					}
				});
				// #endif
			},
			scrolltolower() {
				if (this.page != 1) {
					this.getlist()
				}
			},
			copy(text) {
				uniCopy({
					content: text,
					success: (res) => {
						uni.showToast({
							title: res,
							icon: 'none'
						})
					},
					error: (e) => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 3000,
						})
					}
				})
			},
			handleAdd() {
				this.$fun.jump('/pageC/add')
			},
			removebind() {
				this.$fun.ajax.post('bird/removebind', {
					node_id: this.node_id
				}).then(res => {
					if (res.code == 1) {
						this.page = 1
						this.getlist()
					}
					this.removeshow = false
					this.$fun.msg(res.data)
				})
			},
			// 拨号设置
			handleDial() {
				this.$fun.jump('/pageC/DialSetting/DialSetting')
			},
			// 点击tabs
			handleTabs(item, index) {
				this.isSel = index
				this.page = 1
				this.limit = 20
				if (index == 1) {
					this.pipeType = 3
					this.vlan = 1
				} else {
					this.pipeType = -1
					this.vlan = -1
				}
				this.list = []
				this.activeTab = index
				this.getlist()
			},
			getlist() {
				let {
					page,
					limit
				} = this
				this.$fun.ajax.post('bird/userSnList', {
					page,
					limit,
					onlineCode: this.isactive,
				}).then(res => {
					if (this.page > 1) {
						if (res.data.data.length > 0) {
							this.list.push(...res.data.data)
						} else {
							this.$fun.msg('没有更多数据了...')
						}
					} else {
						this.list = res.data.data
						this.addressList = res.data
						this.page++
					}
				})
			},
			getUserSnList(page, limit) {
				this.$fun.ajax.post('butt/userSnList', {
					page: this.page,
					limit: this.limit,
					onlineCode: this.isactive,
					group_id: this.group_id,
					pipeType: this.filterList[1].value,
					vlan: this.vlan
				}).then(res => {
					if (this.page > 1) {
						if (res.data.list.length > 0) {
							this.list.push(...res.data.list);
						} else {
							this.$fun.msg('没有更多数据了...')
						}
					} else {
						this.list = res.data.list
						this.addressList = res.data
						this.page++
					}
				})
			},
			clickItem(item, index) {
				this.activeIndex = index
				this.list = []
				this.page = 1
				this.getUserSnList(this.page, this.limit)
			},
			async getGroupList(onlineCode = -1) {
				await this.getUserSnList(this.page, this.limit)
			},
			jump(url) {
				this.$fun.jump(url)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-image: url('/static/imgbgc.png');
		background-size: 100% 100%;
		background-position: 0% 0%;
		background-repeat: no-repeat;
	}

	.headtop {
		/* #ifndef MP-WEIXIN */
		width: 750rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		width: 550rpx;
		/* #endif */
		height: 88rpx;
		padding: 0 30rpx;

		image {
			width: 162rpx;
			height: 48rpx;
		}

		position: relative;

		.addeq {
			color: #FFFFFF;
			font-size: 30rpx;
		}

		.mask {
			background-color: transparent;
			position: absolute;
			z-index: 999;
			top: 100%;
			right: 10rpx;
			width: 100%;
			height: 1000rpx;

			.position-add {
				position: absolute;
				z-index: 9999;
				top: 0;
				right: 0;
				background-color: #f9f9f9;
				width: 180rpx;
				color: #000;
				border-radius: 10rpx;
				padding: 5rpx;

				.item-add {
					padding: 20rpx 0;
					font-size: 14px;
					font-weight: 600;
					text-align: center;
				}
			}
		}
	}

	.subsection {
		// width: 240rpx;
		background-color: #EBEBEB;
		border-radius: 28rpx;

		&_item {
			// width: 120rpx;
			padding: 0 20rpx;
			height: 56rpx;
			border-radius: 28rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #999999;
			text-align: center;
			line-height: 56rpx;
		}

		&_activeitem {
			// width: 120rpx;
			padding: 0 20rpx;
			height: 56rpx;
			background: #FFFFFF;
			border-radius: 28rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
			transition-duration: 0.3s;
			transition-timing-function: ease-in-out;
		}
	}



	.addtop {
		display: flex;
		justify-content: space-between;
		margin: 0 30rpx;
		padding-top: 40rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 36rpx;
		text-align: center;
		font-style: normal;
		position: relative;

		.mask {
			background-color: transparent;
			position: absolute;
			z-index: 999;
			top: 100%;
			left: 0;
			width: 100%;
			height: 1000rpx;

			.position-add {
				position: absolute;
				z-index: 9999;
				top: 0;
				right: 0;
				background-color: #f9f9f9;
				width: 180rpx;
				color: #000;
				border-radius: 10rpx;
				padding: 5rpx;

				.item-add {
					padding: 20rpx 0;
					font-size: 14px;
					font-weight: 600;
					text-align: center;
				}
			}
		}

		.textname {
			display: flex;

			.text {
				margin-right: 30rpx;
			}

			.selactive {
				width: 36rpx;
				height: 8rpx;
				background: #FFFFFF;
				border-radius: 4rpx;
				margin: 18rpx auto 0;
			}
		}

		.addeq {
			color: #FFFFFF;

			image {
				width: 162rpx;
				height: 48rpx;
			}
		}
	}

	.navb {
		width: 750rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		display: flex;
		justify-content: space-around;
		margin-top: 30rpx;
		padding-top: 28rpx;
		box-sizing: border-box;

		.isactive {
			text-align: center;
			color: #333333;
		}

		.acolor {
			font-size: 32rpx;
			color: #999999;
		}

		.active {
			width: 36rpx;
			height: 8rpx;
			background: #5D78FF;
			border-radius: 4rpx;
			margin: 20rpx auto 0;
		}
	}

	.seltype {
		width: 750rpx;
		// height: 142rpx;
		// background: #FFFFFF;
		padding: 20rpx 20rpx;
		box-sizing: border-box;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		line-height: 32rpx;
		color: #FFFFFF;
		text-align: left;
		font-style: normal;
		align-items: normal;
		.addeq {
			color: #FFFFFF;
		
			image {
				width: 162rpx;
				height: 48rpx;
			}
		}

		.eqi {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			line-height: 24rpx;
			text-align: left;
			font-style: normal;
			display: flex;
			margin-top: 16rpx;
			margin-left: 30rpx;
		}
	}

	.atime {
		width: 710rpx;
		// height: 226rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 22rpx auto;
		box-sizing: border-box;
		padding-bottom: 20rpx;

		.item-bottom {
			display: flex;
			justify-content: space-between;
			font-size: 12px;
			margin-top: 10rpx;
			margin-right: 30rpx;
			margin-left: 20rpx;

			.item-icon {
				display: flex;
				align-items: center;

				.item-text {
					margin-left: 5rpx;
				}
			}
		}

		.atime_top {
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			border-bottom: 1rpx solid #F1F3F6;

			image {
				width: 80rpx;
				height: 80rpx;
				margin-right: 16rpx;
			}
		}

		.atime_name {
			margin-top: 7rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			line-height: 28rpx;
			text-align: left;
			font-style: normal;
		}

		.atime_text {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 22rpx;
			color: #999999;
			line-height: 22rpx;
			text-align: left;
			font-style: normal;
			margin-top: 16rpx;
			width: 266rpx;
		}

		.atime_imgt image {
			width: 80rpx;
			height: 32rpx;
		}

		.atime_bot {
			display: flex;
			justify-content: space-between;
			margin: 20rpx 20rpx 0;

			.atime_botname {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 24rpx;
				text-align: left;
				font-style: normal;
			}

			.atime_botnum {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				line-height: 28rpx;
				text-align: left;
				font-style: normal;
				margin-top: 12rpx;
			}
		}
	}

	.equipment-main {
		position: relative;
		padding-bottom: 150rpx;

		.equipment_box {

			// padding: 0rpx 30rpx;
			.equipment_list {
				margin-top: 20rpx;
			}
		}
	}

	.list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		padding: 20rpx 30rpx;

		&_item {
			padding: 20rpx;
			width: 336rpx;
			// height: 482rpx;
			background: rgba(68, 78, 99, 0.7);
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
			border-radius: 24rpx;
			margin: 0 auto 20rpx;

			.remove {
				width: 40rpx;
				height: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 20rpx;
			}

			.img1 {
				width: 100rpx;
				height: 89rpx;
				margin-bottom: 25rpx;
			}

			.img2 {
				width: 80rpx;
				height: 32rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.list_name {
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}

			.text {

				display: flex;
				align-items: center;

				.b {
					width: 28rpx;
					height: 28rpx;
					background: #55B953;
					border-radius: 50%;
				}


			}

			.list_text {
				font-weight: 400;
				font-size: 22rpx;
				color: #FFFFFF;
				margin-bottom: 20rpx;
				width: 296rpx;
				margin-top: 10rpx;
				display: flex;

				image {
					width: 24rpx;
					height: 24rpx;
				}
			}

			.list_profit {
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				margin-top: 20rpx;

				.name {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}

			.item-bottom {
				display: flex;
				justify-content: space-between;
				font-size: 12px;
				margin-top: 30rpx;
			}
		}
	}
</style>